import * as React from 'react';

import EndComponent from './EndComponent';
import InfoCollectionComponent from './InfoCollectionComponent';
import KeyComponent from './KeyComponent';
import TransferManualServiceComponent from './TransferManualServiceComponent';
import InterfaceComponent from './InterfaceComponent';
import IntentComponent from './IntentComponent';
import ConditionComponent from './ConditionComponent';
import SkipComponent from './SkipComponent';
import { InspectorContext } from '../FlowManage';
import './Inspector.css';
import { useContext } from 'react';
/**
 * 组件的检查器
 * 页面路径：AI管理-机器人管理-版本管理-配置话术流程-右侧配置弹窗
 */
const SelectionInspector: React.FC = () => {
  // 上下文-数据
  const {
    selectedData: { key },
    category,
  } = useContext(InspectorContext);

  // 渲染子组件
  const renderChildren = React.useMemo(() => {
    const currentkey = category + key;
    console.log('renderObjectDetails》》》》》》》category+key:::', currentkey);
    switch (category) {
      // 结束组件
      case 'EndComponent':
        return <EndComponent key={currentkey} />;
      case 'SkipComponent':
        return <SkipComponent key={currentkey} />;
      case 'InfoCollectionComponent':
        return <InfoCollectionComponent key={currentkey} />;
      case 'KeyComponent':
        return <KeyComponent key={currentkey} />;
      case 'TransferManualServiceComponent':
        return <TransferManualServiceComponent key={currentkey} />;
      case 'InterfaceComponent':
        return <InterfaceComponent key={currentkey} />;
      case 'IntentComponent':
        return <IntentComponent key={currentkey} />;
      case 'ConditionComponent':
        return <ConditionComponent key={currentkey} />;
    }
  }, [category, key]);

  return (
    <div id="myInspectorDiv" className="inspector">
      {renderChildren}
    </div>
  );
};

export default React.memo(SelectionInspector);
